<template>
    <div>
        <van-nav-bar left-arrow title="小组奖金" @click-left="onClickLeft">
            <template #right>
                <div class="top-btn">
                    <van-button type="primary" :class="{ disabled: !formRequired }" block size="small" @click="submit()">提交</van-button>
                </div>
            </template>
        </van-nav-bar>
        <div class="self-evaluation">
            <div class="apply-form">
                <div class="group-name">{{ myteam.groupName }}<span>（{{ myteam.employeeNum }}人）</span></div>
                <div class="box-title">我们组本月({{ month }}月)开源节流的贡献：</div>
                <van-field v-model="form.achievement" type="textarea" placeholder="请输入…" maxlength="1000" show-word-limit style="background:#F8F8F8;" />
                <div class="box-title">我们组本月({{ month }}月)申请的奖金：</div>
                <div class="salary-input">
                    <input placeholder="请输入金额" type="number" maxlength="6" pattern="[0-9]*" v-model="form.bonus" :class="{ invalid: !bonusV }" />
                    <span>元</span>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import { Button, Icon, NavBar, Rate, Field, Notify, Dialog } from "vant";
import httpRequest from "../../util/httpRequest";
import { useStore } from "vuex";
import { ref } from "vue";
export default {
    components: {
        [Button.name]: Button,
        [Icon.name]: Icon,
        [NavBar.name]: NavBar,
        [Rate.name]: Rate,
        [Field.name]: Field,
        [Dialog.name]: Dialog,
    },
    setup() {
        const month = ref(new Date().getMonth() + 1);
        return {
            month,
        };
    },
    data() {
        return {
            store: useStore(),
            user: {},
            myteam: {},
            form: {
                teamId: "",
                achievement: "",
                bonus: "",
            },
            formDirty: true,
        };
    },
    computed: {
        formRequired() {
            let bool = true;
            for (let key in this.form) {
                if (!this.form[key]) {
                    bool = false;
                    return;
                }
            }
            return bool;
        },
        bonusV() {
            return this.formDirty ? true : this.form.bonus ? /^\d+$/.test(this.form.bonus) : false;
        },
    },
    created() {
        httpRequest.get("userInfo", {}).then((res) => {
            this.user = res.data.userInfo;
            httpRequest.post("getTeamSummaryByUserId", { userId: this.user.id }).then((res) => {
                this.myteam = res.data;
                this.form.teamId = res.data.id;
            });
        });
    },
    // 注意：组件挂载后才能访问到 ref 对象
    mounted() {
    },
    methods: {
        onClickLeft() {
            if (this.formRequired) {
                Dialog.confirm({
                    message: "退出后内容无法保存，确定退出吗？",
                }).then(() => {
                    this.$router.back();
                });
            } else {
                this.$router.back();
            }
        },
        submit() {
            this.formDirty = false;
            if (this.formRequired && this.bonusV) {
                httpRequest.post("applyTeamBonus", this.form).then((res) => {
                    if (res.resultCode === "000000") {
                        Notify({ type: "success", message: "操作成功" });
                        this.$router.back();
                    } else {
                        Notify({ type: "warning", message: res.data });
                    }
                });
            }
        },
    },
};
</script>

<style lang="less" scoped>
.noshadow {
    box-shadow: none !important;
}
#rateline {
    width: 100%;
    height: 300px;
}
.box-title {
    font-size: 30px;
    color: #000;
    text-align: left;
    padding: 30px 0;
}
.top-btn {
    width: 120px;
    button {
        font-size: 30px;
    }
}
button.disabled {
    background: #f2f2f2;
    border-color: #f2f2f2;
    color: #c1c1c1;
}
.self-evaluation {
    margin-bottom: 40px;
    position: relative;
    margin-top: 20px;
    background: #fff;
    .apply-form {
        padding: 0px 30px 30px 30px;
        .group-name {
            text-align: left;
            font-size: 32px;
            color: #000;
            border-bottom: 1px solid #e8e8e8;
            height: 100px;
            line-height: 100px;
            box-sizing: border-box;
            span {
                color: #333;
                font-size: 26px;
                margin-left: 10px;
            }
        }
        .votes-input {
            display: flex;
            justify-content: space-between;
            align-items: center;
            width: 690px;
            margin-bottom: 20px;
            label {
                white-space: nowrap;
                font-size: 24px;
                color: #333;
            }
            div {
                flex-shrink: 1;
            }
            input {
                width: 100%;
                text-align: center;
                font-size: 26px;
                color: #000;
                border: none;
                padding: 10px;
                box-sizing: border-box;
                border-bottom: 1px solid #cccccc;
                &.input-number.invalid {
                    border-color: red;
                }
            }
            input::-webkit-input-placeholder,
            textarea::-webkit-input-placeholder {
                color: #ccc;
            }

            input:-moz-placeholder,
            textarea:-moz-placeholder {
                color: #ccc;
            }

            input::-moz-placeholder,
            textarea::-moz-placeholder {
                color: #ccc;
            }

            input:-ms-input-placeholder,
            textarea:-ms-input-placeholder {
                color: #ccc;
            }
        }
        .salary-input {
            height: 80px;
            background: #f8f8f8;
            border-radius: 8px;
            position: relative;
            input {
                border: none;
                background: none;
                width: 100%;
                height: 80px;
                padding-right: 50px;
                padding-left: 20px;
                border-radius: 8px;
                box-sizing: border-box;
                font-size: 28px;
            }
            span {
                position: absolute;
                right: 20px;
                top: 50%;
                transform: translateY(-50%);
                font-size: 28px;
            }
        }
    }
}
</style>
